<template>
  <div class="box">
    <MyTable>
      <div class="mask">
        <span>本周热搜 TOP05</span>
      </div>
      <div class="nav" v-for="(item, index) in list" :key="index">
        <div class="left">
          <span>#{{ item.name }}</span>
        </div>
        <div class="rigth">{{ item.num }}</div>
      </div>
    </MyTable>
    <MyTable>
      <div class="mask">
        <span class="kpl">可能感兴趣的人</span>
        <span class="lpl">换一批</span>
      </div>
      <div class="sun" v-for="(item, index) in list2" :key="index">
        <div class="son">
          <p>
            <span>{{ item.name }}</span> {{ item.age }}岁
          </p>
          <p>爱好：{{ item.price }}</p>
          <p>{{ item.time }}</p>
        </div>
        <div class="san">
          <span>+关注</span>
        </div>
      </div>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  components: {
    MyTable
  },
  data() {
    return {
      list: [
        { name: '区域链', num: 96 },
        { name: '数据挖掘', num: 91 },
        { name: '无人机', num: 87 },
        { name: '生命科学', num: 72 },
        { name: '传感器', num: 60 }
      ],
      list2: [
        { name: '坤坤', age: 20, price: '唱,跳,rap,篮球', time: '全面制作人' },
        { name: '梅里猫', age: 22, price: '嚎啸马,荔枝', time: '两年半公司' }
      ]
    }
  }
}
</script>

<style lang="less">
.box {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  margin-bottom: 40px;
  .mask {
    width: 100%;
    height: 30px;
    background-color: skyblue;
    padding: 0 30px;
    line-height: 30px;
    color: #fff;
    .kpl {
      float: left;
    }
    .lpl {
      float: right;
    }
  }
  .nav {
    width: 300px;
    height: 60px;
    display: flex;
    margin: 0 auto;
    border-bottom: 1px solid black;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;
    .left {
      height: 25px;
      background-color: #f3f3f3;
      text-align: center;
    }
  }
  .sun {
    width: 100%;
    height: 120px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
    span {
      font-size: 20px;
    }
    .san {
      width: 70px;
      height: 40px;
      background-color: skyblue;
      border-radius: 20px;
      margin-top: 20px;
      text-align: center;
      line-height: 36px;
    }
  }
}
</style>
